// 导入uni-scss原始变量(确保自定义变量优先级更高)
@import '@/uni_modules/uni-scss/variables.scss';
// 覆盖uni-scss的主色调和辅色
$uni-primary: #f01a82;
$uni-primary-disable: mix(#fff, $uni-primary, 50%);
$uni-primary-light: mix(#fff, $uni-primary, 80%);

// 淡蓝色作为辅色
$uni-info: #87CEFA;
$uni-info-disable: mix(#fff, $uni-info, 50%);
$uni-info-light: mix(#fff, $uni-info, 80%);

// 其他需要覆盖的变量
$uni-bg-color: #f8f8f8;
$uni-border-1: #f0f0f0;
$uni-green: rgb(76, 217, 100); // 新增绿色主题色
$uni-green-light: lighten($uni-green, 10%);
$uni-green-dark: darken($uni-green, 10%);


// Add to existing variables
$uni-text-color-inverse: #fff;

// 添加灰色文本颜色变量
$uni-text-color-grey: #909399;
// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
$uni-main-color: #3a3a3a; 			// 主要文字
$uni-base-color: #6a6a6a;			// 常规文字
$uni-secondary-color: #909399;	// 次要文字
$uni-extra-color: #c7c7c7;			// 辅助说明


// 添加全局圆角变量
$uni-border-radius-lg: 24rpx;  // 大圆角
$uni-border-radius-md: 16rpx;  // 中等圆角
$uni-border-radius-sm: 8rpx;   // 小圆角

.uni-searchbar__cancel{
    background-color: rgba(240, 240, 240, 0.7); // 淡灰色半透明背景
    border-radius: 60rpx; // 使用大圆角变量
}
.uni-tag-text--small{
  border-radius: $uni-border-radius-lg;
}
.uni-tag--small{    
    border-radius: $uni-border-radius-lg;
}


.page-container {
    padding: 20rpx;
    background: linear-gradient(135deg, $uni-bg-color 0%, darken($uni-bg-color, 5%) 100%);
}

.search-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 20rpx;
    border-radius: $uni-border-radius-lg;
    padding: 15rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    background: #fff;
}

.search-container {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 700rpx;
}

.action-buttons {
    display: flex;
    align-items: center;
    margin-left: 20rpx;
    flex-shrink: 0;
}

.search-btn {
    margin-left: 20rpx;
    background: linear-gradient(to right, $uni-primary, lighten($uni-primary, 15%));
    color: $uni-text-color-inverse;
    border-radius: 40rpx;
    padding: 0 50rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    display: inline-block;
}

.uni-icons {
    margin-left: 20rpx;
}


.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20rpx 0;
    background: #fff; // 分页栏改为白色
    border-radius: $uni-border-radius-lg; // 使用大圆角
    padding: 15rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.page-btn {
    padding: 4rpx 12rpx; // 进一步缩小按钮尺寸
    margin: 0 12rpx; // 缩小外边距
    background: linear-gradient(to right, #f0f0f0, #e0e0e0); // 淡灰色渐变
    color: $uni-text-color-grey; // 使用灰色文字
    border-radius: $uni-border-radius-lg;
    font-size: 22rpx; // 更小的字体
    border: none; // 移除边框
    outline: none; // 移除点击时的轮廓线
}

.card-item {
    background: $uni-bg-color;
    border-radius: $uni-border-radius-lg; // 使用大圆角
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

    .item-title {
        font-size: 32rpx;
        color: $uni-primary;
        font-weight: bold;
        margin-bottom: 10rpx;
        display: block;
    }

    .item-content {
        font-size: 28rpx;
        color: $uni-secondary-color; // 使用已定义的次要文字颜色
    }
}

.page-info {
    color: $uni-text-color-grey;
    font-size: 24rpx;
    margin: 0 12rpx;
}

.add-btn {
    color: $uni-primary-disable !important;
    font-size: 30rpx;
}

.store-card {
    border-radius: $uni-border-radius-lg;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    position: relative;
    background: #fff; 
    
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 0rpx;
        background: rgba($uni-green, 0.2); // 修改顶部装饰条为绿色
        border-radius: $uni-border-radius-lg $uni-border-radius-lg 0 0;
    }
}

.store-header {
    display: flex;
    justify-content: space-between;
    align-items: center;  // 确保图片和文字垂直居中
    margin-bottom: 20rpx;
}

.store-image {
    width: 150rpx;
    height: 150rpx;
    border-radius: $uni-border-radius-lg;  // 使用大圆角
    margin-right: 20rpx;  // 图片和名称之间的间距
}
.store-name {
    font-size: 36rpx;
    color: $uni-main-color;
    font-weight: bold;
}

.store-status {
    font-size: 24rpx;
    padding: 4rpx 12rpx;
    border-radius: $uni-border-radius-sm;
  
    &.open {
        color: $uni-green;
        width: 50%;
        text-align: center;
    }

    &.closed {
        background: rgba($uni-text-color-grey, 0.1);  // 改为灰色
        color: $uni-text-color-grey;
        width: 50%;
        text-align: center;
    }
}

.store-time {
    font-size: 28rpx;
    color: $uni-text-color-grey;
    margin-bottom: 20rpx;
}

.store-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15rpx;
}

.primary-action {
    flex: 1;
    min-width: 80rpx;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 28rpx;
    padding: 0 20rpx;
    font-weight: bold;
    color: $uni-green; // 修改主按钮颜色为绿色
    border-radius: $uni-border-radius-lg;
    text-align: center;
    display: inline-block;
}

.action-links {
    display: flex;
    flex: 3;
    justify-content: flex-start;  // 改为从左到右对齐
    gap: 20rpx;  // 添加间距
}

.action-link {
    color: $uni-secondary-color;
    font-size: 26rpx;
    text-decoration: underline;
    padding: 10rpx 15rpx;
    
    &:active {
        color: darken($uni-primary, 10%);
    }
}
.hearder-box {
  display: flex;
  flex-direction: row;
  padding-bottom: 20rpx;
  border-bottom: 1rpx dashed $uni-secondary-color;
  margin-bottom: 20rpx;
}

.store-img {
  flex: 1;
}

.store-title {
  flex: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.store-time-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.line{
    display: block;
    border-bottom: 1rpx dashed $uni-extra-color;
}
.bottom-padding{
    display: block;
    padding: 120rpx;
}
.top-padding{
    display: block;
    padding: 100rpx;
}